<template>
        <div class="login-container">
                <el-form :model="form" status-icon :rules="rules" ref="ruleFormRef" label-width="100px" class="login-form">
                        <h1 class="title-zc">知识付费运营管理后台</h1>
                        <el-form-item label="账号" prop="username">
                                <el-input v-model="form.username"></el-input>
                        </el-form-item>

                        <el-form-item label="密码" prop="password">
                                <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item>
                                <el-button type="primary" @click="submitForm">登录</el-button>
                        </el-form-item>
                </el-form>
        </div>
</template>
<script setup >
import { reactive, ref } from "vue";
import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css';
import { useRouter } from 'vue-router'
import service from '@/utils/request'
//获取pina的保存信息同步方法
import { useUserInfoStore } from '../stores/counter'
//获取模块实例
var userInfoStore = useUserInfoStore()


var router = useRouter()

var ruleFormRef = true
var form = reactive({
        username: "",
        password: ""
})
const rules = reactive({
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
})
const submitForm = () => {
        if (form.username, form.password) {
                //发送请求获取账号密码信息
                service({
                        url: "http://localhost:3000/cipher"
                }).then(res => {
                        console.log(res.data);
                        //存储到userinfo
                        userInfoStore.save_userinfo(res.data[0])
                        console.log(userInfoStore.userinfo.adminname);
                        console.log(userInfoStore.userinfo.password);
                })
                if (form.username == userInfoStore.userinfo.adminname && form.password == userInfoStore.userinfo.password) {
                        ElMessage({
                                message: "登录成功",
                                type: "success",
                        })
                        router.push('/index')
                }else{
                        ElMessage({
                                message: "请输入正确的账号密码",
                                type: "success",
                        })   
                }
        }
}

</script>
<style scoped>
.login-container {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-image: url("../../public/背景.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
}

.login-form {
        width: 350px;
        margin: 350px auto;
        background-color: rgba(90, 187, 211, 0.7);
        padding: 30px;
        border-radius: 20px;
}
.title-zc {
        text-align: center;
}
.el-button{
        background-color: rgba(255, 235, 205, 0.097);
}
</style>